<template>
  <video width="500" height="300" ref="videoRef" autoplay></video>
</template>

<script setup>
  import { onMounted, shallowRef } from "vue";

  const faceApi = require("axios");

  // const videoRef = ref();

  // // 加载face模型
  // const loadModel = async () => {
  //   await faceApi.nets.tinyFaceDetector.loadFromUri("/models");
  //   await faceApi.nets.faceLandmark68Net.loadFromUri("/models");
  //   await faceApi.nets.faceRecognitionNet.loadFromUri("/models");
  //   await faceApi.nets.faceExpressionNet.loadFromUri("/models");
  // };
  // // 获取摄像头权限并启动视频流
  // const startVideo = async () => {
  //   const video = videoRef.value;
  //   if (!video) return;
  //   const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
  //   video.srcObject = stream;
  // };
  // const detectFace = async () => {
  //   const video = videoRef.value;
  //   if (!video) return;
  //   console.log(video);
  //   const detections = await faceApi
  //     .detectAllFaces(video)
  //     .withFaceLandmarks()
  //     .withFaceExpressions();
  //   console.log(detections);
  //   if (detections.length) {
  //     const expression = detections[0].expressions;
  //     console.log(expression);
  //   }
  //   requestAnimationFrame(detectFace);
  // };
  // const init = async () => {
  //   await loadModel();
  //   await startVideo();
  //   detectFace();
  // };

  onMounted(() => {
    // init();
  });
</script>

<style lang="scss" scoped></style>
